import React from 'react';
import NavBar from './NavBar';
import TransitionAnimationComponent from './TransitionAnimationComponent';
import {TabBar as AntdTabBar} from 'antd-mobile';
import {clientHeight} from '../util/utils';
import style from './css/TabBar.css'

const clientH = clientHeight();

class TabBar extends React.Component {
	
	constructor(...args) {
		super(...args);
		this.baseContentHeight = this.baseContentHeight.bind(this);
		this.fixContentHeight = this.fixContentHeight.bind(this);
		this.fixBottomView = this.fixBottomView.bind(this);
		this.state = {
			contentHeight: this.baseContentHeight(),
		}
	}
	
	baseContentHeight() {
		let bottomHeight = 0;
		if(!this.props.hidden) {
			bottomHeight = 50;
		}
		return clientH - bottomHeight;
	}

	fixContentHeight() {
		let fixHeight = this.baseContentHeight() - this.refs.navBarContainer.clientHeight;
		if(this.state.contentHeight != fixHeight) {
			this.setState({
				contentHeight: fixHeight
			});
		}
	}
	
	fixBottomView() {
		let bottomDom = document.querySelector('.am-tabs-tab-bar-wrap');
		if(bottomDom) {
			if(this.props.hidden) {
				bottomDom.className = 'am-tabs-tab-bar-wrap ' + style.hidden;
			} else {
				bottomDom.className = 'am-tabs-tab-bar-wrap';
			}
		}
	}
	
	render() {
		let tabList = this.props.tabList;
		let navBar = this.props.navBar;
		let navBarNode;
		let itemNodes = [];
  		for(let i = 0; i < tabList.length; i ++) {
			let item = tabList[i];
			let contentNode = item.content;
			let navRightContent = item.navRightContent;
			let navLeftContent = item.navLeftContent;
			let navBottomContent = item.navBottomContent;
			if(this.props.navBar && item.selected) {
				navBarNode = (
					<NavBar 
					rightContent={navRightContent} 
					leftContent={navLeftContent} 
					bottomContent={navBottomContent} 
					topOffsetUpdateCallBack={this.fixContentHeight}>
				    	{item.navTitle}
				    </NavBar>
				);
				contentNode = (
					<TransitionAnimationComponent currentKey={item.key} cover='auto'>
						{contentNode}
					</TransitionAnimationComponent>
				);
			}
			itemNodes.push(
				<AntdTabBar.Item 
				style={{height: this.state.contentHeight}} 
            	title={item.title} 
            	key={item.key} 
            	icon={item.icon} 
            	selectedIcon={item.selectedIcon} 
            	selected={item.selected} 
            	badge={item.badge} 
            	onPress={() => {
            		this.props.onPress && this.props.onPress(item.key);
            	}}>
  					{contentNode}
				</AntdTabBar.Item>
			);
  		}
	    return (
			<div className='tabBarContainer'>
				<div ref='navBarContainer' className={style.navBar}>
					{navBarNode}
				</div>
				<AntdTabBar 
				unselectedTintColor={this.props.unselectedTintColor}
				tintColor={this.props.tintColor}
				barTintColor={this.props.barTintColor}
				hidden={this.props.hidden || false}
				>
					{itemNodes}	
		        </AntdTabBar>
			</div>
		);
	}
	
	componentDidMount() {
		this.fixContentHeight();
		this.fixBottomView();
	}
	
	componentDidUpdate() {
		this.fixContentHeight();
		this.fixBottomView();
	}
	
}

export default TabBar;